<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动及溢出处理</title>
    <style type="text/css">
        body{
            padding: 0;
            margin: 0;
        }
        .div{
            width: 960px;
            height: 600px;
            margin: 0 auto;
            background-color: #ff6600;
        }
        .left{
            float: left;
            width: 260px;
            height: 460px;
            background-color: #ced4dc;
        }
        .right{
            float: right;
            width: 700px;
            height: 460px;
            background-color: aqua;
            margin-bottom: 10px;
        }
        .bottom{
            margin-top: 10px;
            clear: both;
            height: 150px;
            width: 100%;
            background-color: red;
        }
        .info{
            width: 260px;
            height: 200px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="div">
        <div class="left">
            <div class="info">
                文本属性可定义文本的外观。通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
                文本属性可定义文本的外观。通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
                文本属性可定义文本的外观。通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
                文本属性可定义文本的外观。通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
                文本属性可定义文本的外观。通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
                文本属性可定义文本的外观。通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
            </div>
        </div>
        <div class="right"></div>
        <div class="bottom"></div>
    </div>
</body>
</html>